<template>
    <div>
        <div class="boxs">
            <div class="heard">
                <div class="h-left">
                    <van-icon name="arrow-left" size="15" />
                    <span>返回</span>
                </div>
                <h3 class="h-title">京东商城</h3>
                <h4 class="h-rig">更多</h4>
            </div>
            <div class="naw">
                <div class="n-left">
                    <van-icon name="wap-nav" size="22" />
                </div>
                <div class="n-cont">
                    <input type="text" placeholder="请输入搜索关键词">
                    <div class="q-left">
                        <p class="JD">JD</p>
                        <van-icon class="eachs" name="search" size="16" />
                    </div>
                </div>
                <p class="n-rig">登录</p>
            </div>
            <div class="ee">
                <div class="bgs"></div>
                <div class="lunbo">
                    <van-swipe :autoplay="3000" :show-indicators="true" indicator-color="#fff">
                      <van-swipe-item v-for="(image, index) in images" :key="index">
                        <img v-lazy="image" alt=""/>
                      </van-swipe-item>
                    </van-swipe>
                </div>
            </div>
            <van-swipe-cell class="hud">
            <ul class="nae">
                <li v-for="(item,index) in im1" :key="index">
                    <img v-lazy="item.img" alt="">
                    <p>{{ item.tst }}</p>
                </li>
            </ul>
              <template #right style="width: 7.5rem">
                <ul class="nar" >
                    <li v-for="(item,index) in im2" :key="index">
                        <img v-lazy="item.img" alt="">
                        <p>{{ item.tst }}</p>
                    </li>
                </ul>
              </template>
            </van-swipe-cell>
            <div class="seckill">
                <div class="seck-top">
                    <div class="sck-top">
                        <h3>京东秒杀</h3>
                        <div class="cc">
                            <span class="sl">16</span>
                            <img src="../../img/active/bgc.png" alt="">
                        </div>
                        <div class="djs">
                            <van-count-down :time="time">
                              <template #default="timeData">
                                <span class="block">{{ timeData.hours }}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.minutes }}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.seconds }}</span>
                              </template>
                            </van-count-down>
                        </div>
                        <div class="ri-bc">
                            <span>爆款轮番炒</span>
                            <van-icon class="rig"  name="arrow" />
                        </div>
                    </div>
                    <ul class="sck-bottom">
                        <li>

                        </li>
                    </ul>
                </div>
                <div class="seck-bom">
                    <van-swipe-cell class="som">
                    <ul class="s-tp">
                        <li v-for="(item,index) in img1" :key="index">
                            <img v-lazy="item.img" alt="">
                            <p class="pico">￥{{ item.pic }}</p>
                        </li>
                    </ul>
                      <template #right style="width: 7.1rem">
                        <ul class="s-tm" >
                            <li v-for="(item,index) in img2" :key="index">
                            <img v-lazy="item.img" alt="">
                            <p class="pico">￥{{ item.pic }}</p>
                        </li>
                        </ul>
                      </template>
                    </van-swipe-cell>
                </div>
            </div>
            <ul class="commd">
                <li v-for="item in list" :key="item.id">
                    <img v-lazy="item.img" alt="" @click="goDetail(item)">
                    <!-- <img src="../../assets/goods/1.webp" alt=""> -->
                    <div class="comd-btm">
                        <div class="shang">
                            <span class="jdcs" :style="{display: item.JD?'block':'none'}">{{ item.JD }}</span>
                            <span class="cond">{{ item.title }}</span>
                        </div>
                        <div class="sees">
                            <h3><span>￥</span>{{ item.pic }}.00</h3>
                            <span class="mx" :style="{display: item.prf?'block':'none'}">{{ item.prf }}</span>  
                        </div>
                        <p class="support">
                          <span class="zy" :style="{display: item.zy?'block':'none'}">{{ item.zy }}</span>
                          <span class="pl">{{ item.com }}条评论</span>
                        </p>
                        <button class="kxs">{{ item.xiangsi }}</button>
                    </div>
                </li>
            </ul>

        <!-- 详情页 -->
        <van-popup class="details" v-model="show" position="right" >
            <detail :foods="foods" @closePop="closePop">
                
            </detail>
        </van-popup>
        </div>
    </div>
    
</template>

<script>
import detail from '@/components/details/details.vue';
    export default {
        components:{
            detail
        },
        data() {
    return {
        show:false,
        foods:{},
      images: [
      require("../../img/home/1.jpg"),
      require("../../img/home/2.jpg"),
      require("../../img/home/3.jpg"),
      require("../../img/home/4.jpg"),
      require("../../img/home/5.jpg"),
      require("../../img/home/6.jpg"),
      ],
      im1:[{
        img:require("../../img/bar/1.png"),
        tst:"京东超市"
      },{
        img:require("../../img/bar/2.png"),
        tst:"数码电器"
      },{
        img:require("../../img/bar/3.png"),
        tst:"京东新百货"
      },{
        img:require("../../img/bar/4.png"),
        tst:"京东生鲜"
      },{
        img:require("../../img/bar/5.png"),
        tst:"京东到家"
      },{
        img:require("../../img/bar/6.png"),
        tst:"充值缴费"
      },{
        img:require("../../img/bar/7.png"),
        tst:"附近好店"
      },{
        img:require("../../img/bar/8.png"),
        tst:"领劵"
      },{
        img:require("../../img/bar/9.png"),
        tst:"PLUS会员"
      },{
        img:require("../../img/bar/10.png"),
        tst:"京东国际"
      }
      ],
      im2:[{
        img:require("../../img/bar/11.png"),
        tst:"京东拍卖"
      },{
        img:require("../../img/bar/12.png"),
        tst:"玩3C"
      },{
        img:require("../../img/bar/13.png"),
        tst:"沃尔玛"
      },{
        img:require("../../img/bar/14.png"),
        tst:"美妆馆"
      },{
        img:require("../../img/bar/15.png"),
        tst:"京东旅行"
      },{
        img:require("../../img/bar/16.png"),
        tst:"拍拍二手"
      },{
        img:require("../../img/bar/17.png"),
        tst:"全部"
      }
      ],
      time: 30 * 60 * 60 * 1000,
      list:[],
      img1:[
        {
            img:require("../../../src/img/active/1.jpg"),
            pic:46
        },
        {
            img:require("../../../src/img/active/2.jpg"),
            pic:2379
        },
        {
            img:require("../../../src/img/active/3.jpg"),
            pic:62
        },
        {
            img:require("../../../src/img/active/4.jpg"),
            pic:698
        },
        {
            img:require("../../../src/img/active/5.jpg"),
            pic:459
        }
      ],
      img2:[
          {
              img:require("../../../src/img/active/6.jpg"),
              pic:38
          },
          {
              img:require("../../../src/img/active/2.jpg"),
              pic:335
          },
          {
              img:require("../../../src/img/active/7.jpg"),
              pic:28
          },
          {
              img:require("../../../src/img/active/8.jpg"),
              pic:78
          },
          {
              img:require("../../../src/img/active/9.jpg"),
              pic:688
          }
      ]
    }
  },
  created(){
    this.getGoods()
  },
  methods:{
    async getGoods(){
        let res=await this.axios.get('/data/goods.json')
        console.log(res);
        this.list=res.data.bookList;
        console.log(this.list);

    },
    // 详情页
    goDetail(food){
                this.show=true,
                this.foods=food
                console.log(this.show);
                // alert('确认')
                console.log(this.foods);
            },
    closePop(msg){
        this.show=msg
    }
  }
}
</script>

<style lang="scss" scoped>
.details{
    width: 100%;
    height: 100%;
    background: #fff;
    color: #000;
}
.boxs{
    width: 7.5rem;
    height: 40rem;
    background: #f7f7f7;
    // background-color: greenyellow;
    .heard{
        display: flex;
        height: .88rem;
        line-height: .88rem;
        background: #bd0303;
        border-bottom: .01rem solid #d36463;
        .h-left{
            width: 1.5rem;
            font-size: .26rem;
            color: #fff;
        }
        .h-rig{
            width: 1.3rem;
            font-size: .26rem;
            color: #fff;
        }
        .h-title{
            flex: 1;
            font-size: .38rem;
            color: #542525;
        }
    }
    .naw{
        display: flex;
        height: 1.05rem;
        line-height: 1.05rem;
        background: #bd0303;
        border: 0;
        .n-left{
            width: .94rem;
            color: #fff;
        }
        .n-rig{
            width: .94rem;
            font-size: .28rem;
            color: #fff;
        }
        .n-cont{
            flex: 1;
            position: relative;
            input{
                // width: 100%;
                width: calc(100% - 1.26rem);
                height: .7rem;
                border-radius: .8rem;
                padding-left: 1.26rem;
            }
            ::-webkit-input-placeholder{
                color: #c2c7c7;
            }
            .q-left{
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                .JD{
                    font-size: .30rem;
                    font-weight: bold;
                    margin-left: .3rem;
                    color: #e10609;
                }
                .eachs{
                    line-height: 1rem;
                    margin-left: .13rem;
                }
            }
        }
    }
    .ee{
        height: 2.88rem;
        background: #fff;
        position: relative;
        border: 0;
        .bgs{
            width: 7.5rem;
            height: 2.04rem;
            background: #bd0303;
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 0 0 1rem 1rem;
            
        }
        .lunbo{
            width: 6.9rem;
            height: 2.88rem;
            position: absolute;
            top: 0;
            left: .3rem;
            border-radius: .3rem;
            overflow: hidden;
            .van-swipe{
                height: 2.88rem;
            }
            .van-swipe-item{
                float: left;
                width: 7.5rem;
                height: 2.88rem;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .hud{
        height: 3.24rem;
        .nae{
            width: 7.5rem;
            height: 3.24rem;
            background: #fff;
            // display: flex;
            li{
                float: left;
                width: 1.5rem;
                height: 1.62rem;
                img{
                    margin-top: .3rem;
                    width: .56rem;
                    height: .56rem;
                }
                p{
                    height: .78rem;
                    line-height: .78rem;
                }
            }
        }
        .nar{
            width: 7.5rem;
            height: 3.24rem;
            background: #fff;
            li{
                float: left;
                width: 1.5rem;
                height: 1.62rem;
                img{
                    margin-top: .3rem;
                    width: .56rem;
                    height: .56rem;
                }
                p{
                    height: .78rem;
                    line-height: .78rem;
                }
            }
        }
    }
    .seckill{
        width: 7.1rem;
        height: 2.76rem;
        margin-left: .2rem;
        background: #fbfffb;
        border-radius: .16rem;
        overflow: hidden;
        border: .01rem solid #d1d6d2;
        .seck-top{
            width: 100%;
            height: .74rem;
            background:url(../../img/active/bgc.png) no-repeat;
            background-size: cover;
            .sck-top{
                float: left;
                width: 100%;
                height: .42rem;
                line-height: .42rem;
                margin-top: .18rem;
                // background-color: #fff;
                display: flex;
                h3{
                    width: 1.16rem;
                }
                .cc{
                    width: 1.14rem;
                    .sl{
                        color: #fb5958;
                    }
                    img{
                        width: .42rem;
                        height: .42rem;
                    }
                }
                .djs{
                    width: 1.52rem;
                    .colon {
                      width: 0.06rem;
                      display: inline-block;
                      margin: 0 4px;
                      height: .36rem;
                      color: #ee0a24;
                    }
                    .block {
                      display: inline-block;
                      width: .36rem;
                      height: .36rem;
                      line-height: .36rem;
                      color: #fff;
                      font-size: .20rem;
                      border-radius: .1rem;
                      text-align: center;
                      background-color: #ee0a24;
                    }
                }
                .ri-bc{
                    text-align: right;
                    flex: 1;
                    span{
                        color: #fb1515;
                        margin-right: .1rem;
                    }
                    .rig{
                        width: .24rem;
                        // height: .22rem;
                        // float: right;
                        text-align: center;
                        display: inline-block;
                        margin-right: .22rem;
                        background: #fb1515;
                        color: #fff;
                        border-radius: 50%;
                    }
                }
            }
        }
        .seck-bom{
                // width: 7.1rem;
                height: 2rem;
                // float: left;
                // background-color: red;
                .som{
                    // width: 7.1rem;
                    height: 2rem;
                    .s-tp{
                        width: 7.1rem;
                        height: 100vh;
                        // background: pink;
                        li{
                            float: left;
                            width: 1.42rem;
                            color: #ea0000;
                            img{
                                width: 1.06rem;
                                height: 1.06rem;
                                margin-top: .3rem;
                                // margin-left: .08rem;
                            }
                            .pico{
                                height: .66rem;
                                line-height: .66rem;
                                font-weight: bold;
                                font-size: .28rem;
                            }
                        }
                    }
                    .s-tm{
                        width: 7.1rem;
                        height: 100vh;
                        // background: red;
                        li{
                            float: left;
                            width: 1.42rem;
                            color: #ea0000;
                            img{
                                width: 1.06rem;
                                height: 1.06rem;
                                margin-top: .3rem;
                            }
                            .pico{
                                height: .66rem;
                                line-height: .66rem;
                                font-weight: bold;
                                font-size: .28rem;
                            }
                        }
                    }
                }
            }

    }
    .commd{
        // float: left;
        width: 7.5rem;
        height: 30.4rem;
        margin-top: .2rem;
        // margin-bottom: 30rem;
        // background-color: pink;
        li{
            float: left;
            width: 3.46rem;
            height: 5.43rem;
            background: #fff;
            border-radius: .3rem;
            margin: .2rem;
            margin-right: 0;
            margin-bottom: 0;
            overflow: hidden;
            img{
                width: 3.46rem;
                height: 3.46rem;
                border: 0;
            }
            .comd-btm{
                // height: calc(100vh - 5.62rem);
                height: 1.8rem;
                // background: #ccc;
                margin: .16rem .2rem;
                margin-bottom: 0;
                overflow: hidden;
                position: relative;
                .shang{
                    height: .66rem;
                    overflow: hidden;
                    // background: olive;
                    .jdcs{
                        float: left;
                        // display: inline-block;
                        width: .9rem;
                        height: .26rem;
                        line-height: .26rem;
                        font-size: .2rem;
                        background: #02ba7c;
                        color: #fff;
                        border-radius: .06rem;
                        margin-right: .06rem;
                        margin-top: .04rem;
                        margin-left: .04rem;
                        // margin-left: 0;
                    }
                    .cond{
                        // position: absolute;
                        // left: 0;
                        // top: 0;
                        // text-indent: 4em;
                        // float: left;
                        // display: inline;
                        width: 3.06rem;
                        // margin-right: .2rem;
                        // height: .4rem;
                        font-size: .24rem;
                        overflow: hidden;
                        color: #050505;
                    }
                }
                .sees{
                    height: .34rem;
                    line-height: .34rem;
                    margin-top: .12rem;
                    overflow: hidden;
                    // padding-left: .2rem;
                    // background: #02ba7c;
                    h3{
                        height: .34rem;
                        font-size: .28rem;
                        margin-right: .14rem;
                        color: #f03f3a;
                        float: left;
                        font-weight: bold;
                        span{
                            font-size: .16rem;
                            font-weight: normal;
                        }
                    }
                    .mx{
                        height: .22rem;
                        line-height: .22rem;
                        margin-top: .04rem;
                        font-size: .18rem;
                        color: #c7726c;
                        border: .01rem solid #c7726c; 
                        float: left;
                        border-radius: .06rem;
                        padding: 0.02rem 0.02rem;
                        overflow: hidden;
                    }
                }
                .support{
                    height: .28rem;
                    line-height: .28rem;
                    // margin-left: .2rem;
                    margin-top: .18rem;
                    overflow: hidden;
                    .zy{
                        width: .5rem;
                        float: left;
                        font-size: .17rem;
                        border-radius: .05rem;
                        color: #fff;
                        background: #fe4044;
                        margin-right: .14rem;
                    }
                    .pl{
                        float: left;
                        font-size: .2rem;
                        color: #99999b;
                    }
                }
                .kxs{
                    position: absolute;
                    bottom: .14rem;
                    right: .2rem;
                    width: 1rem;
                    height: .4rem;
                    border-radius: .2rem;
                    color: #050505;
                    background: #f3f3f3;
                }
            }
        }
    }
}

</style>
